<template>
    <div  v-loading="loading"  style="background:white;padding:20px;overflow: auto;max-height:100%;width: 100%;margin;0px;font-size:12px;" >
        
        <el-row style="height:60%;margin-bottom:40px">
        <el-col :span="24" style="border:0px">
          <div class="grid-content"  >
            <div style="text-align:center;margin:auto;font-size:30px">主配电板</div>
              <div style="position:relative;display:flex;margin-top:50px;margin-left:30px;text-align:center;flex-direction: row; justify-content: center; align-items: center; align-content: center">
                  <!-- <div style="width:500px;height:2px;background-color:black;"></div> -->
                  <!-- <div style="width:30px;height:2px;background-color:black;" ></div> -->
                  <!-- <div style="width:500px;height:2px;background-color:black;"></div> -->
                  <div style="position:absolute;margin-top:-40px;margin-left:-30px;font-weight: bold;">AC400V BUS</div>
                  <div style="position: absolute;   margin-left: -550px;margin-top: -55px;">
                      <div v-for="(item,index) in data.moni.four" :key="index" style="display:flex;align-items:center;text-align:center;margin-top:5px;">
                        <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                        <div :style="{'margin-left':'10px',color:getColorName(item)}">{{item.deviceName}}</div>
                      </div>
                     
                  </div>
                  <div style="position: absolute;margin-right: -550px;margin-top: -55px;">
                      <div  v-for="(item,index) in data.moni.five" :key="index" style="display:flex;align-items:center;text-align:center;margin-top:5px;">
                        <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                        <div :style="{'margin-left':'10px',color:getColorName(item)}">{{item.deviceName}}</div>
                      </div>
                  </div>
              </div>

              <div style="display:flex;border-top:2px solid black;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
              
                <div style="flex:1; display:flex;flex-direction: row;flex-wrap: wrap;justify-content: start;">
                  <div class="line" style="height:100px;position: relative;margin-left:50%;">
                    <div style="position: absolute;bottom:-40px;left:-3px">负载</div>
                  </div>
                  <div style="display:flex;flex-direction:column;position: relative;">
                    <div class="line" style="margin-left:40px;height:50px"></div>
                     <div class="line" :style="{marginLeft:'40px',height:'30px',transform: getRang(oneG), transformOrigin: 'bottom left'}" :class="animalOne"></div>
                    <div class="line" style="margin-left:40px;height:50px"></div>
                    <div :style="{border: DG1Color1}" class="circle" >DG1</div>
                    <div style="position: absolute;bottom:70px;right:-40px">DW1</div>
                  </div>
                </div>

                <div style="flex:1;display:flex;flex-direction: row;flex-wrap: wrap;justify-content: start;">
                  <div class="line" style="height:100px;position: relative;margin-left:50%;">
                    <div style="position: absolute;bottom:-40px;left:-3px">负载</div>
                  </div>
                  <div style="display:flex;flex-direction:column;align-items:start;justify-content:start;position: relative;">
                    <div class="line" style="margin-left:40px;height:50px"></div>
                    <div class="line" :style="{'margin-left':'40px',height:'30px',transform:  getRang(twoG), 'transform-origin': 'bottom left' }" :class="animalTwo"></div>
                    <div class="line" style="margin-left:40px;height:50px"></div>
                    <div class="circle" :style="{border: DG1Color2}">
                      DG2
                    </div>
                    <div style="position: absolute;bottom:70px;right:-40px">DW2</div>
                  </div>
                  
                </div>

                <div style="flex:1;display:flex;flex-direction: row;flex-wrap: wrap;justify-content: start;">
                  <div class="line" style="height:100px;position: relative;margin-left:40%;">
                    <div style="position: absolute;bottom:-40px;left:-3px">负载</div>
                  </div>
                  <div style="display:flex;flex-direction:column;align-items:start;justify-content:start;position: relative;">
                    <div class="line" style="margin-left:40px;height:50px"></div>
                    <div class="line" :style="{'margin-left':'40px',height:'30px',transform:  getRang(threeG), 'transform-origin': 'bottom left' }" :class="animalThree"></div>
                    <div class="line" style="margin-left:40px;height:50px"></div>
                    <div class="circle" :style="{border: DG1Color3}">
                      DG3
                    </div>
                    <div style="position: absolute;bottom:70px;right:-40px">DW3</div>
                  </div>
                
                </div>

              </div>
           </div>
          </el-col>
        </el-row>


        <el-row style="height:50%;margin-bottom:2px;display:flex;flex-direction:column;margin-top: 50px">
          <div style="flex:1;display:flex;">
            <div class="help" style="padding:10px;flex:1;" >
                <div style="display:grid; grid-template-columns: repeat(2, 1fr);gap: 10px 10px;" >
                    <div v-for="(item,index) in data.kaig.one" :key="index" >
                        <div style="display:flex;margin-top:10px;justify-content: spaceAround; ">
                                <div  :style="{flex:2,color:getColorName(item)}" >{{item.deviceName}}</div>
                                <div  style="flex:3;height:20px;line-height:20px;border: 1px solid white;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;text-align:center;" >{{item.remark}}</div>
                                <div style="flex:1 ;margin-left:5px"> {{item.unit}}</div>
                        </div>
                    </div>
                </div>

                <div  style="flex: 0 0 auto;border-width:1px;min-width:80px;min-height:190px;border-color:#6d6565b8;text-wrap:wrap;margin:auto;"  >
                    <div  v-for="(item,index) in data.moni.one" :key="index" style="display:flex;text-align:center;align-items:center;margin-top:10px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                    <div  v-for="(item,index) in data.moni.one1" :key="index" style="display:flex;text-align:center;align-items:center;margin-top:10px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                </div>

            </div>
    
            <div class="help" style="padding:10px;flex:1;" >
                <div style="display:grid; grid-template-columns: repeat(2, 1fr);gap: 10px 10px;" >
                    <div v-for="(item,index) in data.kaig.two" :key="index" >
                        <div style="display:flex;margin-top:10px;justify-content: spaceAround; ">
                                <div  :style="{flex:2,color:getColorName(item)}" >{{item.deviceName}}</div>
                                <div  style="flex:3;width:30%;height:20px;line-height:20px;border: 1px solid white;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;text-align:center;" >{{item.remark}}</div>
                                <div style="flex:1;margin-left:5px"> {{item.unit}}</div>
                        </div>
                    </div>
                </div>
                <div  style="flex: 0 0 auto;border-width:1px;min-width:80px;min-height:190px;border-color:#6d6565b8;text-wrap:wrap;margin:auto;"  >
                    <div  v-for="(item,index) in data.moni.two" :key="index" style="display:flex;text-align:center;align-items:center;margin-top:10px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                    <div  v-for="(item) in data.moni.two1" :key="item.systemId" style="display:flex;text-align:center;align-items:center;margin-top:10px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                </div>
             </div>
          <div class="help" style="flex:1;padding:10px;" >
            <div style="display:grid; grid-template-columns: repeat(2, 1fr);gap: 10px 10px;" >
                    <div v-for="(item,index) in data.kaig.three" :key="index" >
                        <div style="display:flex;margin-top:10px;justify-content: spaceAround; ">
                                <div  :style="{flex:2,color:getColorName(item)}" >{{item.deviceName}}</div>
                                <div  style="flex:3;height:20px;line-height:20px;border: 1px solid white;align-content:center;background-color: #0E3170;font-weight: bolder;color:white;text-align:center;" >{{item.remark}}</div>
                                <div style="flex:1;margin-left:5px"> {{item.unit}}</div>
                        </div>
                    </div>
                </div>
            <div  style="flex: 0 0 auto;border-width:1px;min-width:80px;min-height:190px;border-color:#6d6565b8;text-wrap:wrap;margin:auto;"  >
                    <div  v-for="(item,index) in data.moni.three" :key="index" style="display:flex;text-align:center;align-items:center;margin-top:10px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>
                    <div  v-for="(item,index) in data.moni.three1" :key="index" style="display:flex;text-align:center;align-items:center;margin-top:10px;margin-left:20px">
                            <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                            <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                    </div>

                </div>
          </div>
          </div>
           
        </el-row>
        <el-row style="margin-top:20px;padding:20px;" :gutter="20">
          <el-col :span="24" style="border:1px solid black;padding:20px;">
            <div style="display:grid; grid-template-columns: repeat(5, 1fr);gap: 10px 10px;">
              <div v-for="(item,index) in data.moni.six" :key="index" :style="{'display':'flex','align-items':'center','padding':'10px','text-align':'center','margin-left':'20px'}">
                <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
              </div>

            </div>


          </el-col>
        </el-row>
    </div>
  
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { mapState } from "vuex";
export default {
name:"test",
created(){
  this.init()
 if(!this.timer){
    this.timer = setInterval(() => {
        this.init()
    }, 2000);//3秒刷新次
 }
},
watch:{
  threeWarn(newV,oldV){
    console.log("threeWarn===",newV)
    if(newV=='1'||newV=='0'){//不是告警
        this.animalThree="diagonal-line1"//断开
        this.DG1Color3 ='2px solid black';//断开

    }else{//告警则闭合
        this.animalThree="diagonal-line"//闭合
        //延时打开灯泡
        setTimeout(() => {
          this.DG1Color3 = "2px solid green" //闭合
        }, 600);
    }
  },
  oneWarn(newV,oldV){
    console.log("oneWarn===",newV)
    if(newV=='1'||newV=='0'){//不是告警
        this.animalOne="diagonal-line1"//断开
        this.DG1Color1 ='2px solid black';//断开

    }else{//告警则闭合
        this.animalOne="diagonal-line"//闭合
        //延时打开灯泡
        setTimeout(() => {
          this.DG1Color1 = "2px solid green" //闭合
        }, 600);
    }
  },
  twoWarn(newV,oldV){
    console.log("twoWarn===",newV)
    if(newV=='1'||newV=='0'){//不是告警则断开
        this.animalTwo="diagonal-line1"//断开
        this.DG1Color2 ='2px solid black';//断开
    }else{//告警则闭合
        this.animalTwo="diagonal-line"//闭合
        //延时打开灯泡
        setTimeout(() => {
          this.DG1Color2 = "2px solid green" //闭合
        }, 600);
    }
  }
},
computed: {
  ...mapState("app", {   // 对象形式
      alarmList: "alarmList",
      lightSwitch:"lightSwitch",
      extExpSwitch:"extExpSwitch"
  })
},
methods:{
  getColorG(row){
    if(row.warnStatus=='1'||row.warnStatus=='0'){
        return '2px solid black';//断开
      }
      return "2px solid green" //闭合
  },
  getRang(row){
    if(row.warnStatus=='1'||row.warnStatus=='0'){
        return 'rotate(-40deg)';//断开
      }
      return "rotate(0deg)" //闭合
  },

  getFlash(row){
        //2、报警消息时，闪烁
        let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
        );
        if(f){
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
        if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
        {//1、试灯打开
          // console.log("extExpSwitch=="+this.extExpSwitch)
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
          return false;
      },
      getColorName(row){
       //告警消息
      if("2"== row.displayAlarm){
        let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
          );
          if(f){
            return 'red';
          }
          //3、显示设备状态颜色
          if(row.warnStatus=='1'||row.warnStatus=='0'){
            return 'black';
          }
          return 'red'
      }
        return "black";
        
      },
      getColor(row){
        if("2"== row.displayAlarm){  //告警类型
          //告警消息
          let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
          );
          if(f){//2、有报警通知，则显示灯的颜色
            return row.lightColor;
          }
        }
        if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
            console.log("extExpSwitch=="+this.extExpSwitch)
            return row.lightColor;
        }
        //3、显示设备状态颜色
        if(row.warnStatus=='1'||row.warnStatus=='0'){
          return 'grey';
        }
          return row.lightColor;
      },
  init(){
    listDevs({"deptId":this.deptId}).then(response=>{
      this.loading=false;
      let dataArr =response.data;
      // console.log(dataArr)
      if(dataArr){
        this.data.kaig.one= dataArr.filter(item=>{
        return   item.deviceName.startsWith("1G") && item.systemId.startsWith("11M") //开关量
       //  return   "MR" == item.modality && item.deviceName.startsWith("1G") //开关量
     }).sort((a,b)=> {
       return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
       
       this.data.moni.one= dataArr.filter(item=>{
           return   item.deviceName.startsWith("1G") && item.systemId.startsWith("11K") //开关量
          //  return   "MR" == item.modality && item.deviceName.startsWith("1G") //开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

          this.data.moni.one1= dataArr.filter(item=>{
           return   item.deviceName.startsWith("G1") && item.systemId.startsWith("11K") //开关量
          //  return   "MR" == item.modality && item.deviceName.startsWith("1G") //开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

       this.data.moni.two= dataArr.filter(item=>{
        
           return   item.deviceName.startsWith("2G")&& item.systemId.startsWith("11K")  //开关量
          //  return   "MR" == item.modality && item.deviceName.startsWith("2G") //开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 

          this.data.moni.two1= dataArr.filter(item=>{
           return   item.deviceName.startsWith("G2") && item.systemId.startsWith("11K") //开关量
          //  return   "MR" == item.modality && item.deviceName.startsWith("1G") //开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]})


          this.data.kaig.two= dataArr.filter(item=>{
        
        return   item.deviceName.startsWith("2G")&& item.systemId.startsWith("11M")  //开关量
       //  return   "MR" == item.modality && item.deviceName.startsWith("2G") //开关量
     }).sort((a,b)=> {
       return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 
       
 
       //  return   "MR" == item.modality && item.deviceName.startsWith("1G") //开关量


       this.data.kaig.three= dataArr.filter(item=>{
        return   item.deviceName.startsWith("3G") && item.systemId.startsWith("11M") //开关量
       //  return   "MR" == item.modality && item.deviceName.startsWith("1G") //开关量
     }).sort((a,b)=> {
       return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

        this.data.moni.three= dataArr.filter(item=>{
           return  item.deviceName.startsWith("3G") && item.systemId.startsWith("11K")  //开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 

          this.data.moni.three1= dataArr.filter(item=>{
           return  item.deviceName.startsWith("G3") && item.systemId.startsWith("11K")  //开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 
        this.data.moni.four= dataArr.filter(item=>{
           return  this.dev01.includes(item.systemId)//开关量
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 
        this.data.moni.five= dataArr.filter(item=>{
           return  this.dev02.includes(item.systemId)
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 

          this.data.moni.six= dataArr.filter(item=>{
            return  !item.deviceName.startsWith("1G") && !item.deviceName.startsWith("2G") && !item.deviceName.startsWith("3G") && !item.deviceName.startsWith("G1") 
            && !item.deviceName.startsWith("G2") && !item.deviceName.startsWith("G3") && item.systemId.startsWith("11K")
            && !this.dev01.includes(item.systemId)  && !this.dev02.includes(item.systemId) //开关量
          }).sort((a,b)=> {
            return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
            
      }
         this.oneG=dataArr.find(item=>item.systemId=="11K-007");
         this.twoG=dataArr.find(item=>item.systemId=="11K-014")
         this.threeG=dataArr.find(item=>item.systemId=="11K-021")
        
        this.oneWarn=this.oneG.warnStatus;
        this.twoWarn=this.twoG.warnStatus;
        this.threeWarn=this.threeG.warnStatus;


     })
  }
  
    
},
beforeDestroy() {
        console.log("destory")
        if(this.timer){
          clearInterval(this.timer);
          this.timer=null;
        }
      },
data() {
    return{
      dev01:["11K-040","11K-041"],
      dev02:["11K-042","11K-043"]
,      loading:true,
      DG1Color1:"",
      DG1Color2:"",
      DG1Color3:"",
      oneWarn:"",
      threeWarn:"",
      twoWarn:"",
      animalOne:null,
      animalTwo:null,
      animalThree:null,
      oneG:{},
      twoG:{},
      threeG:{},
      data:{
        moni:{
          one:[],
          two:[],
          three:[],
          four:[],
          five:[]
        },
        kaig:{
          one:[],
          two:[],
        }
      },
      deptId:this.$route.query.depCode,
      DG1Color:"2px solid green",
      timer:null
    }
  }
}
</script>
<style scoped >
.el-row {

&:last-child {
  margin-bottom: 0;
}
}
.el-col1 {
height: 100%;
/* border:1px solid; */
border-radius: 0px;
}
.el-col {
height: 100%;
border:1px solid;
border-radius: 0px;
}
.rentangle{
  width: 30px;
  height: 30px;
  display: inline-block;
  /* border-radius: 50%; */

  position: absolute;

  border :solid 1px;
  align-content: center;
  text-align: center;
}
.circle{
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  left: 26px;
  position: absolute;
  bottom: -30px;
  align-content: center;
  text-align: center;
  }
.bg-purple-dark {
/* background: #99a9bf; */
}
.bg-purple {
/* background: #d3dce6; */
}
.line {
  border-right: 2px solid #010101;
  display: inline-block;
  /* margin-bottom: -12px; */
}

.bg-purple-light {
/* background: #e5e9f2; */
}
.grid-content {
  text-wrap:wrap;

}
.alarmDiv{
      display:block;
      -webkit-animation-name: imageAnim;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease;
      -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
      100% {opacity: 0;}
  }

.diagonal-line {
  animation: rotate 600ms linear infinite ;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  transform-origin: 0 0;
}

@keyframes rotate{
  0%{
    transform: rotate(-40deg);
  }
  90%{
    border-right: 2px solid black;
  }
  100%{
    transform: rotate(0deg);
    border-right: 2px solid green;
  }
}
.diagonal-line1 {
  animation: rotate1 0.1s linear infinite ;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  transform-origin: 0 0;
}

@keyframes rotate1{
    0%{
        transform: rotate(-0deg) ;
    }
    10%{
        /* transform: rotate(0deg); */
        border-right: 2px solid black;
    }
    100%{
        transform: rotate(-40deg);
        border-right: 2px solid black;
    }
}
.item {
  flex: 0 0 auto;
  margin: 10px;
}
.row-bg {
  padding: 10px 0;
}

.help{
  border:1px solid;
}
.help:nth-child(n+2){
  border-left:none
}

</style>
